<template>
  <div class="home-wrapper">
    <div class="swiper">
      <div class="block">
        <el-carousel height="900px">
          <el-carousel-item v-for="item in swiperList" :key="item">
            <img :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="important">
      <div class="important_text">核心业务</div>
      <img
        src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMS8wOTdjNzMzMTZmZGFiODkwOTdlZWRhNzYxMDE3ZWI3YS05MC53ZWJw.webp"
        alt=""
      />
      <div class="important_introduce">
        针对家庭真实痛点，提供针对性后勤服务
      </div>
      <div class="important_content">
        <div class="important-household">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jianqu"></use>
          </svg>
          <span class="important-title">家政保洁</span>
          <div class="important-desc">
            提供个性、便捷的优质家庭服务,我们会以较热情的服务态度、较专业的服务精神、较高效服务理念为您缔造一个舒适，洁净的工作生活环境。
            让您花较少的钱，做较多的活，享受较实在的保洁服务
            提供个性、便捷的优质家庭服务,我们会以较热情的服务态度、较专业的服务精神、较高效服务理念为您缔造一个舒适，洁净的工作生活环境。
            让您花较少的钱，做较多的活，享受较实在的保洁服务
          </div>
        </div>
        <div class="right">
          <div class="important-monthNanny">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiazhengxitongguanli"></use>
            </svg>
            <span class="important-title">月嫂</span>
            <div class="important-desc">
              提供个性、便捷的优质家庭服务,我们会以较热情的服务态度、较专业的服务精神、较高效服务理念为您缔造一个舒适，洁净的工作生活环境。
              让您花较少的钱，做较多的活，享受较实在的保洁服务
            </div>
          </div>
          <div class="important-nanny">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shenghuo_jiazhengfuwu"></use>
            </svg>
            <span class="important-title">保姆</span>
            <div class="important-desc">
              提供个性、便捷的优质家庭服务,我们会以较热情的服务态度、较专业的服务精神、较高效服务理念为您缔造一个舒适，洁净的工作生活环境。
              让您花较少的钱，做较多的活，享受较实在的保洁服务
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-superiority">
      <div class="service_text">服务优势</div>
      <img
        src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMS8wOTdjNzMzMTZmZGFiODkwOTdlZWRhNzYxMDE3ZWI3YS05MC53ZWJw.webp"
        alt=""
      />
      <div class="service">
        <div class="service-item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fuwurenyuan"></use>
          </svg>
          <div class="service-text">优质服务</div>
          <div class="service-desc">
            我们把服务项目细分成12项，每一项的打扫顺序，涵盖内容全部标准划分，偷工减料？你不答应，我们也不允许！
          </div>
        </div>
        <div class="service-item service-papers">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gerenzhongxin-zhengjian"></use>
          </svg>
          <div class="service-text">三证齐全</div>
          <div class="service-desc">
            每个员工都配有三证，身份认证、技能认证、健康认证，给客户安心放心的专业服务。
          </div>
        </div>
        <div class="service-item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dianzanzan"></use>
          </svg>
          <div class="service-text">专业技能</div>
          <div class="service-desc">
            每位员工上岗前经过80课时的培训、实操、考核、定期进行在岗培训，提升服务技能，满分上岗更专业。
          </div>
        </div>
      </div>
    </div>
    <div class="ad">
      <img src="../assets/new_page_1.png" alt="" />
    </div>
    <div class="success">
      <div class="service_text">成功案例</div>
      <img
        src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMS8wOTdjNzMzMTZmZGFiODkwOTdlZWRhNzYxMDE3ZWI3YS05MC53ZWJw.webp"
        alt=""
      />
      <div class="swiper">
        <div class="swiper-item">
          <img src="../assets/lunbo1.png" alt="" />
        </div>
        <div class="swiper-item">
          <img src="../assets/lunbo2.png" alt="" />
        </div>
        <div class="swiper-item">
          <img src="../assets/lunbo3.png" alt="" />
        </div>
        <div class="swiper-item">
          <img src="../assets/lunbo4.png" alt="" />
        </div>
        <div class="swiper-item">
          <img src="../assets/lunbo5.png" alt="" />
        </div>
        <div class="swiper-item">
          <img src="../assets/lunbo6.png" alt="" />
        </div>
      </div>
    </div>
    <div class="contact">
      <div class="contact_text">联系我们</div>
      <img
        src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMS8wOTdjNzMzMTZmZGFiODkwOTdlZWRhNzYxMDE3ZWI3YS05MC53ZWJw.webp"
        alt=""
      />
      <img src="../assets/contact.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      swiperList: [
        "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC84N2FkNmY4NmU5ZWMwOTkwY2MzM2EzNTYzNTNiYjQ5Yy05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC8zYWJjNDBjMWU2NWUxNDA0OTBmNTNlMzUxZmM0MDc1MS05MC53ZWJw.webp",
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.home-wrapper {
  .swiper {
    width: 100%;
    /deep/ .el-carousel__button {
      height: 5px;
      background-color: #38a578;
    }
    img {
      // height: auto;
      width: 100%;
      height: 100%;
    }
  }
  .important {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    height: 969px;
    background: url("https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMS80NjgwNmNlNzYxNmE1NTMzZjJjNmQ1ZTI0MjQzNmJhYi05MC53ZWJw.webp")
      center/cover;
    &_content {
      display: flex;
      width: 1000px;
      .important-household {
        flex: 1;
        padding: 20px;
        background-color: #f4f9fc;
        .icon {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
        .important-title {
          font-size: 30px;
          vertical-align: middle;
        }
        .important-desc {
          margin-top: 20px;
          line-height: 30px;
          font-size: 15px;
          color: #666666;
        }
      }
      .important-household:hover {
        background-color: #99ffff;
      }
      .right {
        flex: 1;
        margin-left: 10px;
        .important-monthNanny {
          padding: 20px;
          background-color: #f5f4ef;
          margin-bottom: 10px;
          .icon {
            width: 50px;
            height: 50px;
            vertical-align: middle;
          }
          .important-title {
            font-size: 30px;
            vertical-align: middle;
          }
          .important-desc {
            margin-top: 20px;
            line-height: 30px;
            font-size: 15px;
            color: #666666;
          }
        }
        .important-nanny {
          background-color: #f5f4ef;
          padding: 20px;
          .icon {
            width: 50px;
            height: 50px;
            vertical-align: middle;
          }
          .important-title {
            font-size: 30px;
            vertical-align: middle;
          }
          .important-desc {
            margin-top: 20px;
            line-height: 30px;
            font-size: 15px;
            color: #666666;
          }
        }
        :hover {
          background-color: #ffffdd;
        }
      }
    }
    &_text {
      font-size: 30px;
      line-height: 50px;
    }
    img {
      margin: 10px 0;
    }
    &_introduce {
      line-height: 30px;
      margin-bottom: 30px;
      color: #aaaaaa;
    }
  }
  .service-superiority {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 60px;
    .service_text {
      font-size: 30px;
      line-height: 50px;
    }
    img {
      margin: 10px 0 50px;
    }
    .service {
      display: flex;
      justify-content: space-between;
      width: 1000px;
      .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 300px;
        .icon {
          width: 100px;
          height: 100px;
        }
        .service-text {
          line-height: 60px;
          font-weight: bold;
        }
        .service-desc {
          line-height: 20px;
          font-size: 15px;
          color: #666666;
        }
      }
    }
  }
  .ad {
    width: 100%;
    margin-bottom: 40px;
    img {
      width: 100%;
    }
  }
  .success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    .swiper {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      width: 1000px;
      .swiper-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        img {
          width: 80%;
        }
      }
    }
    .service_text {
      font-size: 30px;
      line-height: 50px;
    }
    img {
      margin: 10px 0 50px;
    }
  }
  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    background: url("https://img-qn.51miz.com/Element/00/58/75/71/32ea6304_E587571_968a5214.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/630")
      center/cover;
    .contact_text {
      font-size: 30px;
      line-height: 50px;
    }
    img {
      margin: 10px 0 50px;
    }
  }
}
</style>
